<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
#box{width:222px; height:222px; border:1px red solid;  margin:150px auto; position:relative; overflow:hidden}
#box img{width:100%; height:100%;}
#box .content{width:100%; height:100%; position:absolute; left:0; top:0px;background:#F03; transition:all 0.35s; transform:rotate(90deg); transform-origin: right bottom; opacity:0.7}
#box .content i{display:block; width:30px; height:30px; border-radius:100%; background:white; margin:10px auto;}
#box .content h4{color:white; text-align:center; margin-top:30px; font-weight:bold;}
#box .content p{color:white; text-align:center; margin-top:50px;}
#box:hover .content{ transform:rotate(0);}

</style>
</head>

<body>
    <div id="box">
    	<img src="1.jpg" />
        <div class="content">
        	<i></i>
            <h4>ChenJiang</h4>
            <p>这是一个效果</p>
        </div>
    </div>
</body>
</html>
